<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		#app{
			text-align:center;
		}
		#app div{
			margin:10px auto;
			color:red;
			color:#ff0000; #fff000;
		}
	</style>
	<body>
		<div id='app'>
			<label>宽度：</label><input v-model="w" type="number"> <br>
			<label>高度：</label><input v-model="h" type="number"><br>
			<label>背景：</label><input v-model="bg" type="color"><br>
			<label>边框：</label>
			宽度<input v-model="border[0]" type="number">
			类型<select v-model="border[1]">
				<option value="solid">实线</option>
				<option value="dashed">虚线</option>
				<option value="dotted">点线</option>
				<option value="double">双实线</option>
			</select>
			颜色<input v-model="border[2]" type="color"><br>
			<label>圆角：</label>
			<input v-model="radius[0]" type="range" min="0" max="50">
			<input v-model="radius[1]" type="range" min="0" max="50"><br>
			<input v-model="radius[2]" type="range" min="0" max="50">
			<input v-model="radius[3]" type="range" min="0" max="50">
			<div :style="{
				width:w+'px',
				height:h+'px',
				background:bg,
				border:border[0]+'px' +border[1]+''+border[2],
				borderRadius:radius[0]+'%',
			}"></div>
		</div>
		<script>
			Vue.createApp({
				data(){
					return{
						w:300,
						h:300,
						bg:'#ffff00',
						border:[0,'',''],
						radius:[0,0,0,0],
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>
